<template>
    <div>
        <div v-if="showBack" class="header">
            <router-link to="/" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">关于我们</h1>
             <div class="header-btnRight"></div>
        </div>
        <div class="hea-group">
            <img src="../assets/hea-group.jpg" alt="">
        </div>
        <div class="pg_panel">
            <div class="pg_panel-title">
                <span class="pg_panel-title-icon"> </span> 关于快帮行
            </div>
            <div class="pg_panel-des">
                <p>快帮行是一个跨境旅游服务平台，连接目的地资源，为世界各地游客提供北美定制游、特色体验活动、交通出行、美食住宿、票务代订等服务。</p>
            </div>
        </div>
        <div class="hea-atlas">
            <img src="../assets/hea-atlas.jpg" alt="">
        </div>
        <div class="pg_panel-desmap">
            <p>快帮行总部在美国西雅图，在北京和杭州设有两个中心，洛杉矶、温哥华、蒙特利尔都有团队，成员来自腾讯、阿里、百度、微软、联想等跨国公司，具备丰富的工作经历及海外生活经验。</p>
        </div>
        <div class="h30"></div>
        <div class="pg_panel">
            <div class="pg_panel-title">
                <span class="pg_panel-title-icon"> </span> 快帮行·体验不一样
            </div>
            <div class="hea-experience">
                <img src="../assets/hea-experience.jpg" alt="">
            </div>
        </div>
        <div class="h30"></div>
        <div class="pg_panel">
            <div class="pg_panel-title">
                <span class="pg_panel-title-icon"> </span> 合作伙伴
            </div>
            <div class="pg_panel-partners">
                <div class="pg_panel-partners-list"><img src="../assets/about_10.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about_11.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about_12.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about_13.jpg" alt=""></div>
            </div>
            <div class="pg_panel-partners">
                <div class="pg_panel-partners-list"><img src="../assets/about_14.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about_15.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about_16.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about_17.jpg" alt=""></div>
            </div>
        </div>
        <div class="pg_panel">
            <div class="pg_panel-title">
                <span class="pg_panel-title-icon"> </span> 媒体报道
            </div>
            <div class="pg_panel-partners">
                <div class="pg_panel-partners-list"><img src="../assets/about_19.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about__20.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about__21.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about__22.jpg" alt=""></div>
            </div>
            <div class="pg_panel-partners">
                <div class="pg_panel-partners-list"><img src="../assets/about__23.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about__24.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about__25.jpg" alt=""></div>
                <div class="pg_panel-partners-list"><img src="../assets/about__26.jpg" alt=""></div>
            </div>
        </div>
        <div class="h30"></div>
        <div class="pg_panel">
            <div class="pg_panel-title">
                <span class="pg_panel-title-icon"> </span> 公司地址
            </div>
            <div class="pg_panel-des">
                <p>北京: 回龙观东大街首开广场运动家创客空间407-2室</p>
                <p>杭州：余杭区仓前街道梦想小镇互联网村23幢</p>
                <p>西雅图: 1400 112th Ave SE Ste 100, Bellevue, WA 98004, USA</p>
            </div>
        </div>
        <div class="pg_panel pa_bottom">
            <div class="pg_panel-title">
                <span class="pg_panel-title-icon"> </span> 联系客服
            </div>
            <div class="pg_panel-des">
                <p>国内: +86 400-100-5295</p>
                <p>北美: +1 888-828-0899</p>
                <p>微信: kbxmei</p>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import wxShare from "../store/wxShare"
    export default {
        data(){
            return {
                showBack: true
            }
        },
        created(){
            let query = this.$route.query;
            if(query && query.from){
                this.showBack = false
            }
        },
        mounted() {
            this.share();
        },
        methods: {
            share() {
                wxShare({
                    title: '关于我们', // 分享标题
                    desc: '快帮行，体验美好旅行生活', // 分享描述
                    debug: false,
                }, function (res) {//分享成功后的回调函数
                    
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30 {
        height: rpx(10);
        background: $bgcolor1
    }
    .header{
        display: flex;
        align-items: center;
        padding:rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
            &-btnLeft{
                 width: rpx(64);
                 height: rpx(64);
                 padding-top: rpx(16);
                    img{
                        width: rpx(32);
                        height: rpx(32);
                    }
            }
            &-title{
                 flex: 1;
                 font-size: rpx(36);
                 text-align: center;
                 font-weight: normal;
             }
            &-btnRight{
                 width: rpx(64);
                 height: rpx(64);
                 padding-top: rpx(16);
                    img{
                        width: rpx(42);
                        height: rpx(42);
                    }
            }
    }
    .hea-group{
        width: 100%;
        height: rpx(375);
           img{
               width: 100%;
           }
    }
    .hea-atlas{
        width: 100%;
        height: rpx(239);
           img{
            width: 100%;
           }
    }
    .pg_panel {
        color: rgb(252, 92, 42);
        padding: rpx(30) rpx(30) rpx(30) rpx(30);
        position: relative;
        &-title {
            padding: 0 0 rpx(30);
            font-size: rpx(34);
            font-weight: bold;
            display: flex;
            align-items: center;
       }
       &-des{
            color:rgb(51,51,51);
            font-size: rpx(24);
            line-height: rpx(40);
        }
        &-partners{
             display: flex;
            &-list{
                 width:rpx(174) ;
                 height:rpx(130) ;
                 display:flex;
                    img{
                        width:rpx(174) ;
                        height:rpx(130) ;
                    }
            }
        }
    }
    .pg_panel-desmap{
        padding: rpx(45) rpx(30) rpx(30) rpx(30);
            p{
                color:rgb(51,51,51);
                font-size: rpx(26);
                line-height: rpx(40);
            };
    }
    .hea-experience{
        width:100%;
        height: rpx(700);
            img{
                width: 100%;
            }
    }
    .pa_bottom{
        padding: rpx(0) rpx(30) rpx(30) rpx(30);
    }
</style>